<template>
	<view>
		<view class="house-card" @click="goDetails(item)" v-if="!item.notLoaded">
			<view :style="cardOpacity">
				<view class="card-photo" :style="cardPhoto">
					<view class="card-tag" :style="tag_bgColor" v-if="tagValue">{{
          tagValue + (TESTING ? item.id : '')
        }}</view>
				</view>
			</view>
			<view class="right-content">
				<view class="house-card-title-area">
					<view :style="cardOpacity" class="h-title">
						<text :style="meta ? '' : 'width: 400rpx;'">{{ item.title }}</text>
					</view>
					<view class="cancel-follow-button" v-if="meta && !meta.noProperty" @click.stop="
              toDelete(cardItem, tagValue === '租' ? 1 : 2)
            ">
						<uni-icons color="#000000" class="uni-icon" size="20" type="close"></uni-icons>
					</view>
				</view>
				<view class="details" v-if="displayBuildMode">
					<view class="area">{{ item.build_area }}m²</view>
					<view style="width: 10px"></view>
					<view class="floor" v-if="item.build_floor">共{{ item.build_floor }}层</view>
				</view>

				<view class="details" v-if="!displayBuildMode">
					<view class="area">{{ item.house_area }}m²/</view>
					<view class="direction" v-if="item.house_direction">{{
            item.house_direction + '/'
          }}</view>
					<view class="floor-type">{{ item.house_floor_type }}</view>
					<view style="width: 10px"></view>
				</view>

				<view class="tags" v-if="!displayBuildMode">
					<view class="tag" v-for="(tag, index) in item.sell_label" v-if="index < 2 && tag" :key="index">
						{{ tag }}
					</view>
				</view>

				<view class="price">
					<view v-if="!displayBuildMode" class>
						<!--        显示总售价-->
						<view :style="priceTextStyle" class="left-price" v-if="tagValue === '售'">
							<view class="cn-unit refer">参考价:</view>
							{{ item.house_sell_price | tenMillion }}
							<view class="cn-unit">
								<text v-if="item.house_sell_price > 10000">万</text>元
							</view>
						</view>

						<!--        显示租价  -->
						<view v-else>
							<view class="left-price" :style="priceTextStyle">
								<view class="cn-unit refer">参考价:</view>
								<view class="number">{{ item.house_price | tenMillion }}</view>
								<view class="cn-unit">
									<text v-if="item.house_price > 10000">万</text>元/月
								</view>
							</view>
						</view>

						<!--<view class="right-price" v-if="!displayBuildMode && item.utility_fee ">水电费: {{item.utility_fee}}</view>-->
						<!--<view class="right-price"></view>-->
					</view>
					<view v-else class style="margin-top: 7vw">
						<view class="left-price" :style="priceTextStyle">
							<view class="cn-unit refer">参考价:</view>
							{{ item.build_price | tenMillion }}
							<view class="cn-unit">
								<text v-if="item.build_price > 10000">万</text>元/月
							</view>
						</view>
					</view>
					<view class="off-shelf" v-if="offShelf">已下架</view>
				</view>
			</view>
		</view>
		<view class="house-card" v-if="item.notLoaded">
			<view class="card-photo"></view>

			<view class="right-content">
				<view class="loading-placeholder-bar"></view>
				<view class="loading-placeholder-bar"></view>
				<view class="loading-placeholder-bar half-width"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		filter
	} from '@/util/reuse/filter';
	import {
		appMixin,
		houseCardMixin
	} from '../util/reuse';
	import {
		getHouseTag,
		ROUTER_OBJ,
		uniNavigate,
		uniShowToast,
		getRouterParam,
		MY_LOCATION
	} from '../util/misc';
	import {
		uniSetStorageSync
	} from '../util/funcs';
	import {
		tokenRequest
	} from '@/util/network';

	export default {
		mixins: [filter, appMixin, houseCardMixin],
		props: {
			// 房源卡片元信息, 目前只在关注列表(我的关注 follow.vue)有用, 用于直接给用户在关注列表进行取消关注操作
			meta: {
				default () {
					return {
						noProperty: true,
					};
				},
			},
			loaded: {
				type: Boolean,
				default () {
					return false;
				},
			},
			tagName: {
				type: String,
				default () {
					return undefined;
				},
			},
			// 房源信息, 房源item
			item: {
				// required: true,
				type: Object,
				default () {
					return {
						is_out: 0,
						notLoaded: true,
						id: undefined,
						house_sell_price: '', // 房源总售价
						house_sell_type: '', // 1租  2售 3租售 4已租 5已售 6资料房 7暂停房 8司租 9司售
						title: 'await',
						details: '185.2㎡/东南/高楼层  共30层',
						tags: [{
								content: '满五年',
							},
							{
								content: '随时看房',
							},
						],
						rentPrice: 25800,
						waterElectricityFee: 5000,
						build_price: 0,
						house_price: 0,
						// from api
						build_area: 'await', // 面积
						build_floor: '',
						build_birth: '',
						province: '',
						city: '',
						area: '',
						build_thumb: [],
						house_thumb: [],
						house_direction: '北北', //房屋朝向
						house_floor_type: '未设楼层',
						utility_fee: '-5',
					};
				},
			},
			displayBuildMode: {
				type: Boolean,
				default () {
					return false;
				},
			}, // 要显示的东西, false 显示的是房源
		},
		data() {
			return {
				noData: '暂无数据',
				validTagArr: ['租', '售', '租售'],
				itemLoaded: false,
				substituteThumbImage: '../static/images/previewPhoto_houseCard.png',
			};
		},
		
		mounted() {
		},
		
		methods: {
			/**
			 * @description 删除操作
			 *
			 *  - 取消关注
			 *  - 删除浏览记录
			 * @param item
			 * 结构如下
			 * {
			 *   ...item, // 主要是有id
			 *   ...meta
			 * }
			 * @param type
			 *  租或者售
			 * @returns {Promise<void>}
			 */
			async toDelete(item, type) {
				if (item.hasOwnProperty('is_follow')) {
					await this.followThisThing(item, type);
					this.$emit('cancelFollowDone');
				} else if (item.hasOwnProperty('browse')) {
					await this.deleteBrowseHistory(item, type);
					this.$emit('deleteDone');
				}
			},
			
			deleteBrowseHistory(item, type) {
				return new Promise((resolve, reject) => {
					tokenRequest(
						'/del_history_list', {
							house_id: item.id,
							type
						}, {
							success: ({
								data
							}) => {
								uniShowToast(data.msg);

								if (data.code === 200) {
									resolve();
								} else {
									reject();
								}
							},
						}
					);
				});
			},

			goDetails(item) {
				if (this.offShelf) {
					uniShowToast('该房源已下架, 请您重新选择其他房源', false);
					return;
				}
				let obj = {"showSellPrice": false, id: item.id};			
				if (
					(this.tagName && this.tagName.indexOf('售') !== -1) ||
					(this.item && this.item.house_sell_type === 2)
				) {
					// 详情页中应该显示总售价
					uniSetStorageSync(ROUTER_OBJ, {
						...item,
						showSellPrice: true,
						displayBuildMode: false,
					});
					obj.showSellPrice = true;
				} else {
					uniSetStorageSync(ROUTER_OBJ, {
						...item,
						showSellPrice: false,
						displayBuildMode: false,
					});
					obj.showSellPrice = false;
				}
				obj = JSON.stringify(obj);
				// 决定是去房源详情还是盘源详情
				if (this.displayBuildMode) {
					uniNavigate(`/displayDetails/displayBuildDetails?obj=${obj}`);
				} else {
					uniNavigate(`/displayDetails/displayDetails?obj=${obj}`);
				}
			},
		},
		computed: {
			//合并卡片信息和卡片元信息
			cardItem() {
				return {
					id: this.item.id,
					...this.meta
				}
			},
			//判断已下架状态
			offShelf() {
				// console.log(this.item);
				// console.log(this.item.house_sell_type);
				return this.item.is_out === 1;
				// return false;
			},
			tagValue() {
				let tagValue;
				if (this.tagName) {
					tagValue = this.tagName;
				} else {
					tagValue = getHouseTag(this.item.house_sell_type);
				}
				return tagValue;
			},
			thumbImage() {
				if (this.displayBuildMode) {
					if (this.item.build_thumb) return this.item.build_thumb[0];
				} else {
					if (this.item.house_thumb) return this.item.house_thumb[0];
				}
			},
		},
		
	};
</script>

<style lang="scss" scoped>
	@import '../assets/styles/global';

	.house-card {
		background-color: white;
		margin-top: 10px;
		width: 688rpx;
		min-height: 242rpx;
		display: flex;
		border-bottom: 1px solid #ebedf0;
		padding-bottom: 30rpx;

		.card-photo {
			width: 280rpx;
			height: 208rpx;
			background-color: whitesmoke;
			border-radius: 12rpx;
			@include cover-no-repeat-center;

			.card-tag {
				padding-left: 10rpx;
				padding-right: 10rpx;
				// #ifdef H5
				max-width: 100rpx;
				// #endif
				// #ifdef APP-PLUS || MP-WEIXIN
				width: 35px;
				// #endif
				height: 36rpx;
				background-color: #e45a5a;
				border-radius: 4rpx;
				@include center;
				font-size: 22rpx;
				color: #ffffff;
				@include ellipsis;
			}
		}

		.right-content {
			/*border: 1px solid red;*/
			padding-left: 15rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			min-width: 408rpx;

			.loading-placeholder-bar {
				width: 50vw;
				height: 4vw;
				/*background-color: yellow;*/
				background-color: whitesmoke;
				margin-bottom: 10px;
			}

			.half-width {
				width: 25vw;
			}

			.house-card-title-area {
				height: 40rpx;
				width: 400rpx;
				margin-bottom: 8px;
				display: flex;
				justify-content: space-between;

				text {
					width: 340rpx;
					@include ellipsis;
					font-size: 32rpx;
					line-height: 40rpx;
					color: #06121f;
				}

				.h-title {
					width: 340rpx;
					@include ellipsis;
					font-size: 32rpx;
					line-height: 40rpx;
					color: #06121f;
				}

				.cancel-follow-button {
					@include center;
					width: 56rpx;
					height: 40rpx;
					/*background-color: grey;*/
					/*background-color: #edf1f4;*/
					color: #000000;
					border-radius: 2vw;
				}
			}

			.details {
				display: flex;
				max-width: 191px;
				@include ellipsis;
				height: 32rpx;
				font-size: 24rpx;
				line-height: 32rpx;
				color: #8c9198;
				margin-bottom: 20rpx;
			}

			.tags {
				max-width: 400rpx;
				//@include ellipsis;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;
				margin-bottom: 5px;

				.tag {
					display: inline-block;
					max-width: 75px;
					height: 18px;
					line-height: 18px;
					background-color: #edf1f4;
					border-radius: 4rpx;
					text-align: left;
					overflow-y: hidden;
					padding: 0 6px;
					font-size: 22rpx;
					color: #969799;
					margin-right: 14rpx;
					margin-bottom: 5rpx;
					@include ellipsis;

					&:first-child {
						// margin-left: 0rpx;
					}
				}
			}

			.price {
				margin-top: 3px;
				@include center;
				justify-content: space-between;
				align-items: flex-end;
				width: 99%;

				.left-price {
					/*width: 24vw;*/
					width: 100%;
					/*background-color: yellow;*/
					font-size: 32rpx;
					/*font-size: 32rpx;*/
					font-weight: bold;
					letter-spacing: 0rpx;
					color: #ff4444;
					display: flex;
					height: 38rpx;
					position: relative;

					.number {
						max-width: 50vw;
						@include ellipsis;
						/*background-color: yellow;*/
					}

					.cn-unit {
						width: 12vw;
						/*background-color: yellow;*/
						padding-top: 6rpx;
						font-weight: normal;
						height: 38rpx;
						font-size: 25rpx;
						@include ellipsis;
					}
					.refer{
						width: auto;
					}
				}

				.right-price,
				.off-shelf {
					position: relative;
					top: 3px;
					display: flex;
					height: 38rpx;
					font-size: 12px;
					letter-spacing: 0rpx;
					color: #8c9198;
					max-width: 28vw;
					@include myEllipsis;
					/*background-color: yellow;*/
				}

				.off-shelf {
					max-width: 22vw;
					padding: 4rpx 10rpx;
					font-size: 22rpx;
					@include center;
					background-color: rgba(119, 136, 153, 0.7);
					border-radius: 2vw;
					color: whitesmoke;
				}
			}
		}
	}
</style>
